<template>
  <div class="main">
    <h2 class="user-title"><span>收藏的商品</span></h2>
    <div class="goods-content list-wrapper">
      <ul class="goods-list">
        <li class="goods-item col-2" v-for="item in goodsList" :key="item.productId">
          <router-link class="product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
            <img :src="item.productCover" class="product-img" width="100%">
            <div class="product-info">
              <div class="sell">
                <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                <span class="sell-price">
                  <em>¥</em>
                  <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                  <span v-else>?</span>
                  <i class="sell-type">/{{item.attributeName}}</i>
                </span>
                <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
              </div>
              <div class="name">{{item.name}}</div>
              <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
              <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
              <div class="discounts" v-if="item.activity">
                <div class="tag-group" v-if="item.activity.isMore === '1'">
                  <span class="tag" v-for="(tag, index1) in item.activity.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                </div>
                <div class="tag-group" v-else>
                  <span class="tag">{{item.activity.activityName}}</span>
                </div>
              </div>
            </div>
          </router-link>
          <!-- 取消收藏 -->
          <div class="collection-cancel" @click="cancel(item.productId)"></div>
        </li>
      </ul>
      <div v-if="goodsList.length === 0" class="no-goods">
        暂无收藏商品
      </div>
    </div>
    <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
   </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
import {FavourableActivityTypes} from '@/util/enums'
export default {
  data () {
    return {
      FavourableActivityTypes: FavourableActivityTypes, // 优惠类型
      goodsList: [],
      page: 1,
      pageSize: 25,
      total: 0
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    getGoodsList () {
      let param = {
        page: this.page || 1,
        pageSize: 25
      }
      this.$http.post(this.$api + '/pc/product/productsStores', param).then(res => {
        if (res.responseCode === '0000') {
          this.goodsList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 取消收藏
    cancel (productId) {
      this.$http.post(this.$api + '/pc/product/addOrDeleteProduct', {
        productId: productId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.$message({
            type: 'success',
            message: res.responseMsg,
            duration: 1000
          })
          this.getGoodsList()
        }
      })
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.getGoodsList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.user-title ::after {
  width:81px;
}
.goods-content {
  .goods-list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -2px;
    margin-right: -10px;
    li {
      width: 200px;
      border: 1px solid $border_color;
      box-sizing: border-box;
    }
  }
}
.list-wrapper .goods-list .goods-item{
  position: relative;
  padding: 0;
  height: auto;
  margin-right: 12px;
  &:hover {
    .collection-cancel {
      display: block;
    }
  }
  .collection-cancel{
    display: none;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    background: url(../../assets/images/icon-cancel.png);
    cursor: pointer;
  }
}
.no-goods{
  padding: 20px;
  text-align: center;
}
.list-wrapper .goods-list .goods-item .product-box .product-img{height: 200px;}
.list-wrapper .goods-list .goods-item .product-box .product-info{
  padding: 0 5px 10px;
  .sell{
    white-space:nowrap;
  }
}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .discount{font-size: $fz_12;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .sell-price{font-size: $fz_14;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .sell-price .sell-type{
  font-size: $fz_12;
}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .orignal-price{font-size: $fz_12;}
.list-wrapper .goods-list .goods-item .product-box .product-info .store {overflow: hidden;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .orignal-price{padding-top: 3px;}
.list-wrapper .goods-list .goods-item .product-box .product-info .name {font-size: 14px; line-height: 16px; height: 32px;overflow: hidden;}
</style>
